<template>
  <!-- 评论区域 -->
    <el-card shadow="hover" class="mb-6">
        <template #header>
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-semibold">评论 ({{ comments.length }})</h3>
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-500">排序：</span>
                    <el-select v-model="commentSort" size="small" style="width: 100px">
                        <el-option label="最新" value="latest"></el-option>
                        <el-option label="最热" value="hot"></el-option>
                    </el-select>
                </div>
            </div>
        </template>

        <!-- 评论输入框 -->
        <div class="mb-10">
            <div class="flex space-x-4">
                <!--                                                <el-avatar :size="40" :src="currentUser.avatar"></el-avatar>-->
                <div class="flex-grow">
                    <el-input
                            v-model="commentContent"
                            type="textarea"
                            :rows="3"
                            placeholder="写下你的评论..."
                            class="w-full"
                            :class="{ 'border-red-300': commentError }"
                            @input="resetCommentError">
                        <template #append>
                            <el-button
                                    type="primary"
                                    @click="submitComment"
                                    :disabled="!commentContent.trim()"
                                    :loading="submittingComment">
                                发布评论
                            </el-button>
                        </template>
                    </el-input>
                </div>
            </div>
        </div>

        <!-- 评论列表 -->
        <div class="space-y-6" v-if="comments.length > 0">
            <div v-for="(comment, index) in filteredComments" :key="index" class="comment-item">
                <div class="flex space-x-4">
                    <el-avatar :size="40" :src="comment.user.avatar"></el-avatar>
                    <div class="flex-grow">
                        <div class="flex items-center justify-between mb-1">
                            <div class="flex items-center">
                                                    <span class="font-medium text-gray-900">{{
                                                        comment.user.name
                                                        }}</span>
                                <el-tag v-if="comment.isAuthor" type="success" size="mini"
                                        class="ml-2">作者
                                </el-tag>
                            </div>
                            <span class="text-sm text-gray-500">{{
                                formatTime(comment.time)
                                }}</span>
                        </div>
                        <div class="text-gray-800 mb-2">{{ comment.content }}</div>
                        <div class="flex items-center space-x-4 text-sm">
                            <el-button
                                    type="primary"
                                    link
                                    @click="likeComment(comment.id)"
                                    :class="{ 'text-red-500': comment.liked }">
                                <i class="fa fa-thumbs-o-up mr-1"></i>
                                <span>{{ comment.likes }}</span>
                            </el-button>
                            <el-button type="primary" link @click="replyComment(comment.id)">回复
                            </el-button>
                        </div>

                        <!-- 子评论 -->
                        <div v-if="comment.replies.length > 0" class="mt-4 comment-reply">
                            <div v-for="(reply, replyIndex) in comment.replies" :key="replyIndex"
                                 class="reply-item">
                                <div class="flex space-x-3">
                                    <el-avatar :size="32" :src="reply.user.avatar"></el-avatar>
                                    <div class="flex-grow">
                                        <div class="flex items-center justify-between mb-1">
                                            <div class="flex items-center">
                                                                    <span class="font-medium text-gray-900 text-sm">{{
                                                                        reply.user.name
                                                                        }}</span>
                                                <el-tag v-if="reply.isAuthor" type="success"
                                                        size="mini" class="ml-2 text-xs">作者
                                                </el-tag>
                                            </div>
                                            <span class="text-xs text-gray-500">{{
                                                formatTime(reply.time)
                                                }}</span>
                                        </div>
                                        <div class="text-gray-800 text-sm mb-2">{{
                                            reply.content
                                            }}
                                        </div>
                                        <div class="flex items-center space-x-4 text-xs">
                                            <el-button
                                                    type="primary"
                                                    link
                                                    @click="likeReply(reply.id)"
                                                    :class="{ 'text-red-500': reply.liked }">
                                                <i class="fa fa-thumbs-o-up mr-1"></i>
                                                <span>{{ reply.likes }}</span>
                                            </el-button>
                                            <el-button type="primary" link
                                                       @click="replyReply(reply.id, comment.id)">回复
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 回复输入框 -->
                        <div v-if="comment.replying" class="mt-4 comment-reply">
                            <div class="flex space-x-3">
                                <el-avatar :size="32" :src="currentUser.avatar"></el-avatar>
                                <div class="flex-grow">
                                    <el-input
                                            v-model="comment.replyContent"
                                            type="textarea"
                                            :rows="2"
                                            placeholder="写下你的回复..."
                                            class="w-full"
                                            @keyup.enter.native="submitReply(comment.id)">
                                        <template #append>
                                            <el-button
                                                    type="primary"
                                                    @click="submitReply(comment.id)"
                                                    :disabled="!comment.replyContent.trim()"
                                                    :loading="comment.replyingLoading">
                                                回复
                                            </el-button>
                                        </template>
                                    </el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center mt-6" v-else>
            <el-empty description="暂无评论，快来发表你的看法吧"></el-empty>
        </div>
        <!-- 加载更多评论 -->
        <div class="text-center mt-6" v-if="comments.length >= 3">
            <el-button @click="loadMoreComments" plain>加载更多评论</el-button>
        </div>
    </el-card>
</template>

<script setup>

import {onMounted, reactive, ref} from "vue";
// 评论数据
const comments = ref([

]);

// 评论排序
const commentSort = ref('latest');

// 评论输入
const commentContent = ref('');
const commentError = ref(false);

const submittingComment = ref(false);
// 评论提交
const submitComment = () => {
    if (!commentContent.value.trim()) {
        commentError.value = true;
        return;
    }

    submittingComment.value = true;

    // 模拟API请求
    setTimeout(() => {
        const newComment = {
            id: comments.value.length + 1,
            user: currentUser.value,
            content: commentContent.value,
            time: new Date(),
            likes: 0,
            liked: false,
            isAuthor: false,
            replies: [],
            replying: false,
            replyContent: '',
            replyingLoading: false
        };

        comments.value.unshift(newComment);
        commentContent.value = '';
        commentError.value = false;
        submittingComment.value = false;

        // 滚动到新评论
        const commentList = document.querySelector('.comment-item');
        if (commentList) {
            commentList.scrollIntoView({behavior: 'smooth', block: 'start'});
        }
    }, 800);
};

// 重置评论错误状态
const resetCommentError = () => {
    commentError.value = false;
};

// 回复评论
const replyComment = (commentId) => {
    comments.value.forEach(comment => {
        if (comment.id === commentId) {
            comment.replying = true;
        } else {
            comment.replying = false;
        }
    });
};

// 提交回复
const submitReply = (commentId) => {
    const comment = comments.value.find(c => c.id === commentId);
    if (!comment || !comment.replyContent.trim()) return;

    comment.replyingLoading = true;

    // 模拟API请求
    setTimeout(() => {
        const newReply = {
            id: Date.now(),
            user: currentUser.value,
            content: comment.replyContent,
            time: new Date(),
            likes: 0,
            liked: false,
            isAuthor: false
        };

        comment.replies.unshift(newReply);
        comment.replyContent = '';
        comment.replying = false;
        comment.replyingLoading = false;
    }, 800);
};

// 点赞评论
const likeComment = (commentId) => {
    const comment = comments.value.find(c => c.id === commentId);
    if (comment) {
        comment.liked = !comment.liked;
        comment.likes = comment.liked ? comment.likes + 1 : comment.likes - 1;
    }
};

// 点赞回复
const likeReply = (replyId) => {
    comments.value.forEach(comment => {
        const reply = comment.replies.find(r => r.id === replyId);
        if (reply) {
            reply.liked = !reply.liked;
            reply.likes = reply.liked ? reply.likes + 1 : reply.likes - 1;
        }
    });
};

// 回复回复
const replyReply = (replyId, commentId) => {
    comments.value.forEach(comment => {
        if (comment.id === commentId) {
            comment.replies.forEach(reply => {
                if (reply.id === replyId) {
                    comment.replying = true;
                }
            });
        }
    });
};

// 加载更多评论
const loadMoreComments = () => {
    // 模拟加载更多
    const moreComments = [
        {
            id: 4,
            user: {
                id: 5,
                name: '赵四',
                avatar: 'https://picsum.photos/id/1027/200/200'
            },
            content: '感谢分享！我在项目中使用Vue3+TypeScript已经有一段时间了，确实带来了很多便利。不过在处理复杂表单的时候还是会遇到一些类型推导的问题，不知道有没有好的解决方案？',
            time: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), // 5天前
            likes: 12,
            liked: false,
            isAuthor: false,
            replies: [],
            replying: false,
            replyContent: '',
            replyingLoading: false
        }
    ];

    comments.value = [...comments.value, ...moreComments];
};
</script>

<style scoped>
.comment-reply {
    margin-left: 1.5rem;
    border-left: 2px solid #e5e7eb;
    padding-left: 1rem;
}
</style>